<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<title>密码找回</title>
	<script src="${ctx}/script/jquery/jquery-1.11.1.min.js" type="text/javascript"></script>
	<script type="text/javascript">$.extend({"ctx": "${ctx}"});</script>
	
	<link rel="shortcut icon" href="${ctx}/static/imgs/favicon.ico" />
	<link rel="stylesheet" href="${ctx}/script/assets/fontawesome/css/font-awesome.min.css" />

<style>
*{box-sizing: border-box;}
html {
	font-family: sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
a {
  background-color: transparent;
}
*:focus { outline: none; }
h1,h2,h3,h4,h5,h6,h7{margin:0;}
body { 
	font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
	overflow:hidden; margin:0px; padding:0px;
	font-size: 12px;
	line-height: 1.42857143;
	
}
.btn{
	display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.btn-blue {
    color: #ffffff;
    background-color: #005b9c;
    border-color: transparent;
}
.btn-blue:hover {
    -moz-box-shadow:
        0 15px 30px 0 rgba(255,255,255,.15) inset,
        0 2px 7px 0 rgba(0,0,0,.2);
    -webkit-box-shadow:
        0 15px 30px 0 rgba(255,255,255,.15) inset,
        0 2px 7px 0 rgba(0,0,0,.2);
    box-shadow:
        0 15px 30px 0 rgba(255,255,255,.15) inset,
        0 2px 7px 0 rgba(0,0,0,.2);
}
.btn-blue:active {
    -moz-box-shadow:
        0 15px 30px 0 rgba(255,255,255,.15) inset,
        0 2px 7px 0 rgba(0,0,0,.2);
    -webkit-box-shadow:
        0 15px 30px 0 rgba(255,255,255,.15) inset,
        0 2px 7px 0 rgba(0,0,0,.2);
    box-shadow:        
        0 5px 8px 0 rgba(0,0,0,.1) inset,
        0 1px 4px 0 rgba(0,0,0,.1);
}

div.block{
	position:relative;
	display: block;
	margin-bottom: 10px;
	height: 34px;
}
div.block .form-control{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	height: 34px;
	border: 1px solid #d5d5d5;
	background: #FFF;
    font-size: 14px;
    line-height: 1.42857143;
   	padding: 5px 18px 6px 10px;
   	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	border-radius: 2px;
}
div.block .form-control:focus {
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
div.block i{
	font-size: 16px;
	position: absolute;
	top: 50%;
	right: 5px;
	margin-top:-7px;
	color:#909090; 
}

.container {
	height:100%; position:absolute; width:100%;
	background: #394557 url('../../script/login/login_bg4.png') repeat;
}

.controller{
	margin:0 auto;
	position:relative;
	width:380px;
	margin:0 auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background: #fff;
	border-radius: 5px;
	top: 50%;
	margin-top: -190px;
}
.controller .header{
	width:380px;
    padding: 5px 40px 5px 40px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-bottom: 1px solid #384456;
	box-shadow: 0px 3px 0px rgba(0,0,0,.075);
}
.controller .header h2{
	margin:0px;
	padding-top: 10px;
	padding-bottom: 10px;
    font-weight: lighter;
}
.controller .header h2 i {
	font-size: 20px;
    margin-right: 10px;
}
.controller .box{
	position:relative;
	width:380px;
    padding: 20px 40px 20px 40px;
	margin:0 auto;
	border-radius: 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.controller .form .btn {
	width: 300px;
}

.controller .error_msg .ret{
	margin-top:20px;
	margin-bottom:10px;
	height: 20px;
}
.controller .error_msg .btn {
	width: 100px;
}
.controller .error_msg .left{
	float:left;
}
.controller .error_msg  .right{
	float:right;
}
.ajaxMsg{
	border:1px solid #fc4c24;
	background:#fff5f5;
	text-align:center;
	margin-top: 10px;	
	font-size: 14px;
	line-height: 35px;
	color:red;
	border-radius: 2px;
}
.ajaxMsg span.icon{
	margin-right: 5px;
}
</style>

<script type="text/javascript">
$(function(){
	var h = $("body").height();
	var password_form = "#password_form", error_box = "#error_box";
	
	if("${resp.status?string('true', 'false')}" == "true") {
		$(password_form).show();
		$("#titleError").css({"color": "#478fca"}).html("<i class='fa fa-lock'></i>请输入新的密码").children("i").css("color", "#69aa46"); 
		
		
		var l = $("#submit").bind("click", resetClickBtn = function(){
			resetPwd() ;
		});
		
		function resetPwd(){
			var id = "${(resp.obj.id)!}";
			var username = "${(resp.obj.username)!}";
			var password = $("input[name=password]").val();
			var password1 = $("input[name=password1]").val();
			
			if("" == password.trim() && "" == password1.trim()){
				$("#SuccessMsg").show().html("<span class='fa fa-minus-circle icon'></span><span class='msg'>密码不能为空！</span>");
				return;
			}
			if(password.trim() === password1.trim()) {
				$.post($.ctx+"/system/login/iforgotByResetPassword.do", {"id": id, "newPassword": password}, function(result) {
					l.unbind("click");
					if(result.status) {
						var info = "<span class='fa fa-check icon'></span><span class='msg'>"+result.msg+"</span>" ;
						$("#SuccessMsg").show().html(info).css({"background": "#dff0d8", "border-color": "#d6e9c6", "color": "#3c763d"});
						setTimeout(function(){		
							window.location.replace($.ctx+"/login/main.do");
						},500);
					} else {
						l.bind("click", resetClickBtn) ;
						$("#SuccessMsg").show().html("<span class='fa fa-minus-circle icon'></span><span class='msg'>"+result.msg+"</span>");
					}
				},"JSON");
			} else {
				$("#SuccessMsg").show().html("<span class='fa fa-minus-circle icon'></span><span class='msg'>确认密码与新密码不相同！</span>");
				return ;
			}
		}
		
	} else {
		$(error_box).show();
		$("#titleError").html("<i class='fa fa-minus-circle'></i>错误信息"); 
		$("#titleError").css({"color": "red"});
		$("#msg").html("${resp.msg!}")
	}
});
</script>
</head> 
<body>
	<div class="container">
		<div class="controller">
			<div class="header">
				<h2 id="titleError"><i class="fa fa-lock"></i></h2>
			</div>
			<div id="password_form" class="box form" style="display: none;">
				<div class="block">
					<input type="password" class="form-control" name="password" placeholder="新密码" />
					<i class="fa fa-key"></i>
				</div>
				<div class="block">
					<input type="password" class="form-control" name="password1" placeholder="确认密码" />
					<i class="fa fa-key"></i>
				</div>
				<div>
					<button id="submit" type="button" class="btn btn-blue"><span class="fa fa-key"></span><span class="txt">重设密码</span></button>
				</div>
				<div id="SuccessMsg" class="ajaxMsg" style="display:none;">
				</div>
			</div>
			
			<div id="error_box" class="box error_msg" style="display: none;">
				<div id="msg">用户不存在或链接错误，请重新申请密码找回！</div>
				<div class="ret">
					<button type="button" class="btn btn-blue left" onclick="window.location.replace('${ctx}/login/main.do')"><span class="fa fa-arrow-circle-left"></span> 返回登录</button>
					<button type="button" class="btn btn-blue right" onclick="window.location.replace('${ctx}/login/main.do#iforgot')"><span class="fa fa-key"></span> 重新申请</button>
				</div>
			</div>
		</div>
	</div>	
</body>
</html>